<template>
	<div class="hello">
		<el-container>
			<el-header>
				<!--				<h2>系统配置</h2>-->
			</el-header>
			<el-main>
				<el-form>
					<el-form-item>
						<router-link to="/">
							<el-button>返回</el-button>
						</router-link>
					</el-form-item>
					<el-form-item>
						<el-collapse v-model="activeNames">
							<el-collapse-item v-bind:title="news_list[0].title" name="1">
								<div>
									{{this.news_list[0].content}}
								</div>
							</el-collapse-item>
							<el-collapse-item v-bind:title="news_list[1].title" name="2">
								<div>
									{{this.news_list[1].content}}
								</div>
							</el-collapse-item>
							<el-collapse-item v-bind:title="news_list[2].title" name="3">
								<div>
									{{this.news_list[2].content}}
								</div>
							</el-collapse-item>
							<el-collapse-item v-bind:title="news_list[3].title" name="4">
								<div>
									{{this.news_list[3].content}}
								</div>
							</el-collapse-item>
							<el-collapse-item v-bind:title="news_list[4].title" name="5">
								<div>
									{{this.news_list[4].content}}
								</div>
							</el-collapse-item>
						</el-collapse>
					</el-form-item>
				</el-form>
			</el-main>
			<el-footer>
				<a>copyright@lilou(饮水机管理员)</a>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeNames: ['1'],
				news_list: [],
			}
		},
		created() {
			this.get_news_list();
			for (let count = 0; count < 5; count++) {
				const temp = [];
				temp['title'] = '暂时没有那么多通知哦';
				temp['content'] = '说了没有了';
				this.news_list.push(temp);
			}
		},
		methods: {
			get_news_list() {
				axios.get('get_news_list').then((res) => {
					if (res.data.data === 'error') {
						this.$message({
							type: 'error',
							message: "出现了未知错误～"
						});
					} else {
						this.news_list = [];
						//最关键的部分 添加新闻呗
						let count = res.data.data['count'];
						for (let i = 0; i < count; i++) {
							const exam = new Array(res.data.data['list'][i]);
							this.news_list.push(exam[0]);
						}
						//填充新闻格子数量
						if (count < 5) {
							for (; count < 5; count++) {
								const temp = [];
								temp['title'] = '暂时没有那么多通知哦';
								temp['content'] = '说了没有了';
								this.news_list.push(temp);
							}
						}
					}
				})
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1, h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}

	a:link {
		font-size: 12px;
		color: #000000;
		text-decoration: none;
	}

	a:visited {
		font-size: 12px;
		color: #000000;
		text-decoration: none;
	}

	a:hover {
		font-size: 12px;
		color: #999999;
		text-decoration: underline;
	}
</style>
